<template>
  <view>
    <u--image :showLoading="true" shape="circle" @click="preview()" :src="realSrc" :width="`${realWidth}px`"
      :height="`${realHeight}px`">
      <view slot="error" style="font-size: 16rpx;">加载失败</view>
    </u--image>
  </view>
</template>

<script>
  import {
    isExternal,
    isArray
  } from '@/utils/common.js'
  export default {
    name: "ImagePreview",
    props: {
      src: {
        type: [String, null],
        default: ''
      },
      width: {
        type: [String, Number],
        default: '50'
      },
      height: {
        type: [String, Number],
        default: '50'
      }
    },
    computed: {
      realSrc() {
        if (!this.src || this.src == null || this.src == undefined) {
          return;
        }
        let real_src = this.src.split(",");
        if (real_src && isArray(real_src)) {
          var url0 = real_src[0]
          return url0
        }
        return real_src;
      },
      realSrcList() {
        if (!this.src || this.src == null || this.src == undefined) {
          return;
        }
        let real_src_list = this.src.split(",");
        let srcList = [];
        real_src_list.forEach(item => {
          return srcList.push(item);
        });
        return srcList;
      },
      realWidth() {
        return typeof this.width == "string" ? this.width : `${this.width}px`;
      },
      realHeight() {
        return typeof this.height == "string" ? this.height : `${this.height}px`;
      }
    },
    methods: {
      preview() {
        uni.previewImage({
          urls: this.realSrcList,
        });
        console.log(this.realSrcList)
      }
    }
  }
</script>

<style>

</style>